  // 匀速动画
  function animationFun1(ele, target) {
      // 先清除另外一个方向的定时器
      clearInterval(ele.interId);
      // 把定时器的id设置到DOM元素上
      ele.interId = setInterval(function() {
          // 当到达目标时,进行清除定时器
          if (ele.offsetLeft == target) {
              clearInterval(ele.interId);
              // 向右走
          } else if (ele.offsetLeft < target) {
              var dis = (ele.offsetLeft + 13) > target ? target : (ele.offsetLeft + 13);
              ele.style.left = dis + 'px';
              // 向左走
          } else if (ele.offsetLeft > target) {
              var dis = (ele.offsetLeft - 13) < target ? target : (ele.offsetLeft - 13);
              ele.style.left = dis + 'px';
          };
      }, 50);
  };
  // 缓慢动画
  function animationFun2(ele, target) {
      // 先清除另外一个方向的定时器
      clearInterval(ele.interId);
      // 把定时器的id设置到DOM元素上
      ele.interId = setInterval(function() {
          if (ele.offsetLeft == target) {
              clearInterval(ele.interId);
          } else {
              var step = (target - ele.offsetLeft) / 10;
              // 当step为小数时,进行上下取整
              step = step > 0 ? Math.ceil(step) : Math.floor(step);
              ele.style.left = ele.offsetLeft + step + 'px';
          }
      }, 20);
  };


  // 获取元素
  // ul元素
  var viewpage = document.getElementsByClassName('viewpage')[0];
  // 所有的小圆点元素
  var circles = document.getElementsByClassName('circle');

  // 循环给所有小圆点绑定点击事件
  for (var i = 0; i < circles.length; i++) {
      // 保存i值到index属性中
      // 给DOM元素设置index的属性
      circles[i].index = i;
      circles[i].onclick = function() {
          // 1.小圆点的样式改变
          // 排他思想
          for (var j = 0; j < circles.length; j++) {
              circles[j].className = 'circle';
          };
          // 点击谁,谁变红
          this.className = "circle active";
          // 2.使ul进行移动
          var target = this.index * (-1022);
          // 进行缓慢移动
          animationFun2(viewpage, target);
      }
  };

  function autoplay() {
      // 设置初始值为1,因为要看到第二张图片
      var flag = 1;
      setInterval(function() {
          console.log(flag);
          if (flag == circles.length) {
              // 回到0,使第一张图片进行展示,使第一个小圆点进行变红
              flag = 0;
          }
          // 1.小圆点的样式改变
          // 排他思想
          for (var j = 0; j < circles.length; j++) {
              circles[j].className = 'circle';
          };
          circles[flag].className = "circle active";
          // 2.使ul进行移动
          var target = flag * (-1022);
          // 进行缓慢移动
          animationFun2(viewpage, target);
          // 移动完毕时,要进行下一张图片的变化
          flag++;
      }, 2000);

  };
  // 调用函数进行执行
  autoplay();